let value = 65.23;
let title = "vision";
let int = value.toFixed(2).split(".")[0];
let float = value.toFixed(2).split(".")[1];
option = {
  backgroundColor: "#020f18",
  title: {
    text: "{a|" + int + "}{b|." + float + "}\n{c|" + title + "}",
    x: "center",
    y: "center",
    textStyle: {
      rich: {
        a: {
          fontSize: 48,
          color: "#fff",
          fontWeight: "600",
        },
        b: {
          fontSize: 20,
          color: "#fff",
          padding: [0, 0, 14, 0],
        },
        c: {
          fontSize: 20,
          color: "#fff",
          padding: [5, 0],
        },
      },
    },
  },
  series: [
    {
      type: "gauge",
      radius: "60%",
      clockwise: false,
      startAngle: "90",
      endAngle: "-269.9999",
      splitNumber: 30,
      detail: {
        offsetCenter: [0, -20],
        formatter: " ",
      },
      pointer: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: [
            [0, "#2CFAFC"],
            [36.7 / 100, "#0ff"],
            [1, "#0f232e"],
          ],
          width: 20,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        length: 100,
        lineStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0, 255, 255, 1)",
          shadowOffsetY: "0",
          color: "#020f18",
          width: 2,
        },
      },
      axisLabel: {
        show: false,
      },
    },
    {
      type: "pie",
      radius: ["44%", "45%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          color: "#0C355E",
        },
      },
      label: {
        show: false,
      },
      data: _dashed(),
    },

    {
      type: "pie",
      radius: [0, "30%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 20,
          shadowColor: "#000",
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "#0FF",
            },
            {
              offset: 1,
              color: "#060f20",
            },
          ]),
        },
      },
      label: {
        show: false,
      },
      data: [100],
    },
    {
      type: "pie",
      radius: ["64%", "65.5%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 20,
          shadowColor: "rgba(0, 255, 255,.3)",
          color: "#0f232e",
        },
      },
      label: {
        show: false,
      },
      data: [100],
    },
    {
      type: "pie",
      radius: ["68%", "69.5%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 20,
          shadowColor: "rgba(0, 255, 255,.3)",
          color: "rgba(15, 35, 46,.6)",
        },
      },
      label: {
        show: false,
      },
      data: [100],
    },
  ],
};

function _dashed() {
  let dataArr = [];
  for (var i = 0; i < 100; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: 20,
        itemStyle: {
          normal: {
            color: "rgb(0,255,255,.3)",
          },
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: 20,
        itemStyle: {
          normal: {
            color: "rgb(0,0,0,0)",
            borderWidth: 1,
            borderColor: "rgba(0,255,255,1)",
          },
        },
      });
    }
  }
  return dataArr;
}

function doing() {
  let option = myChart.getOption();
  option.series[1].startAngle = option.series[1].startAngle - 1;
  myChart.setOption(option);
}
function startTimer() {
  timer = setInterval(doing, 100);
}
setTimeout(startTimer, 0);
